<template>
  <div class="login-box">
    <img src=http://java-admin.likeadmin.cn/adminapi/static/login_image.png>
    <div class="login-form">
      <div class="login-form-title">likeadmin开源</div>

      <el-form ref="formRef" style="width: 100%" :model="formData" :rules="rules">

        <el-form-item prop="username">
          <el-input placeholder="请输入账号" v-model="formData.username">
            <template #prepend>
              <div class="iconfont icon-zhanghaodenglu"></div>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item prop="password">
          <el-input placeholder="请输入密码" type="password" v-model="formData.password">
            <template #prepend>
              <div class="iconfont icon-mima"></div>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item prop="checkPass">
          <el-checkbox v-model="formData.checkPass" label="记住密码" size="large"/>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" style="width: 100%" @click="submitForm(formRef)">登 录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>

</template>
<script setup>
import {reactive, ref} from 'vue'
import {useRouter} from "vue-router";
import Md5 from 'js-md5'
import NProgress from 'nprogress'
import userStore from "@/store/modules/userStore.js";
import {loginData} from "@/main/data/loginData.js";
import {savePassword, saveUserName, deleteToken} from "@/utils/toolsFun.js";

import '@/views/login/login.css'

const $router = useRouter()
const {CHANGE_USER_DATA} = userStore()
const formRef = ref()
const formData = reactive({
  username: localStorage.getItem('vuethreeuser') || '',
  password: localStorage.getItem('vuethreepass') || '',
  checkPass: !!localStorage.getItem('vuethreeuser'),
})

let validate = (rule, value, callback) => {
  if (rule.fullField === 'username') {
    if (!value) {
      callback(new Error('用户名不能为空'));
    } else if (!/^[a-zA-Z0-9]+$/.test(value)) {
      callback(new Error('用户名只能包含字母和数字'));
    } else {
      callback();
    }
  }
  if (rule.fullField === 'password') {
    if (!value) {
      callback(new Error('请输入密码'));
    } else if (!/^[a-zA-Z0-9]+$/.test(value)) {
      callback(new Error('密码只能包含字母和数字'));
    } else {
      callback();
    }
  }
};
const rules = reactive({
  username: [{validator: validate, trigger: 'blur'}],
  password: [{validator: validate, trigger: 'blur'}],
})


const submitForm = (formEl) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      NProgress.start()
      if (formData.checkPass) {
        saveUserName(formData.username)
        // savePassword(Md5(formData.password))
        savePassword(formData.password)
      } else {
        deleteToken()
      }
      const timer = setTimeout(() => {
        clearTimeout(timer)
        CHANGE_USER_DATA(loginData)
        $router.push('/')
        NProgress.done()
      }, 1000)
    } else {
      console.log('校验失败')
      return false
    }
  })
}
</script>

<style scoped>
:deep(.el-input-group__prepend) {
  background-color: white;
}
</style>
